<template>
	<div class="chart-pane-maps">
		<!-- 热词-->
		<div id="AnhuiMap">安徽地图</div>
	</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
import anhui from './anhui.json'
export default{
	name:'AnhuiMap',
	data(){
		return {
			msg:'',
			anhui:''
		}
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.anhui=anhui;//安徽数据
    	that.getAnhuiMap();
    },
	methods:{
		getAnhuiMap(){
			var that = this;
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('AnhuiMap'));
			// 绘制图表
            echarts.registerMap('anhui', that.anhui);
		    myChart.setOption({
		        tooltip: {
		            trigger: 'item',
		            formatter: '{b}'//{b}<br/>{c}
		        },
		        series: [
		            {
						type: 'map',
						mapType: 'anhui',
						//地图文字颜色
						label:{
							//默认颜色
							normal:{
								show: true,
                       			textStyle:{color:"#ffffff"}
							},
							//鼠标经过
							emphasis:{
						    	textStyle:{color:"#ffffff"}
						    },
						},
						//地图背景颜色
						itemStyle:{						    
						    normal:{
						    	label:{show:true},
						    	areaColor:'#19c792',
						    	borderColor:'#0d0f2a',
						    },						    
						    emphasis:{
						    	label:{show:true},
						    	areaColor:'#e27264'
						    },
						    
						},
						data:[
							{name: '阜阳市',value:''},
							{name: '亳州市',value: ''},
							{name: '淮北市',value: ''},
							{name: '宿州市',value: ''},  
							{name: '淮南市',value: ''},  
							{name: '蚌埠市',value: ''},  
							{name: '六安市',value: ''},
							{name: '合肥市',value: '',selected:true},
							{name: '滁州市',value: ''},  
							{name: '安庆市',value: ''}, 
							{name: '巢湖市',value: ''},  
							{name: '马鞍山市',value: ''},  
							{name: '池州市',value: ''},  
							{name: '铜陵市',value: ''},  
							{name: '芜湖市',value: ''},  
							{name: '黄山市',value: ''},  
							{name: '宣城市',value: ''}
						],

		            }
		        ],

		    });
		}
	}
}
</script>
<style>
#AnhuiMap{
	width:400px;
	height: 400px;
	margin:0 auto;
}
</style>